<template>
	<view class="container">
		<view class="product-list">
			<view class="product-list-item">
				<image :src="info.ProductImage" mode="aspectFill" class="product-list-item-img"></image>
				<view class="product-list-item-r">
					<view class="product-list-item-r-title">{{info.ProductName}}</view>
					<view class="product-list-item-r-guige">
						规格: {{info.Specifications}}
					</view>
					<view class="product-list-item-r-price">￥{{info.SinglePrice || ''}}</view>
					<view class="product-list-item-r-num">
						<view>
							<u-tag :text="getOrderStatus(info.OrderStatus)" plain size="mini" type="warning" shape="circle"></u-tag>
						</view>
						<span>x{{info.Quantity}}</span>
						
					</view>
					
				</view>
			</view>
		</view>

		<view class="rating-section">
			<text class="rating-title">评价</text>
			<view class="rating-item">
				<text class="rating-label">产品质量</text>
				<view class="stars">
					<u-rate v-model="form.video_quality" :allowHalf="true" activeColor="#F2CB51"
						inactiveColor="#B3B3B3"></u-rate>
				</view>
				<text class="score">{{ form.video_quality * 2 }}分</text>
			</view>
			<view class="rating-item">
				<text class="rating-label">物流服务</text>
				<view class="stars">
					<u-rate v-model="form.content_quality" :allowHalf="true" activeColor="#F2CB51"
						inactiveColor="#B3B3B3"></u-rate>
				</view>
				<text class="score">{{ form.content_quality * 2 }}分</text>
			</view>
			<view class="rating-item">
				<text class="rating-label">描述相符</text>
				<view class="stars">
					<u-rate v-model="form.teaching_method" :allowHalf="true" activeColor="#F2CB51"
						inactiveColor="#B3B3B3"></u-rate>
				</view>
				<text class="score">{{ form.teaching_method * 2 }}分</text>
			</view>
			<view class="comment-section">
				<textarea class="comment-input" placeholder="展开说说你对产品的评价" v-model="form.content"></textarea>
			</view>
		</view>

		<button class="submit-button" @click="submit">提交</button>
	</view>
</template>
<script>
	import {
		InformationEvaluate,
		InformationSendFriendRequest,
		InformationAddEvaluate
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				id: '',
				info: '',
				form: {
					// id: '',
					video_quality: 5, //视频质量
					content_quality: 5, //内容质量
					teaching_method: 5, //教学方法
					content: '', //内容
					order_id: '', //订单id
					course_id: '', //视频id
					type: 1
				}
			};
		},
		onLoad(e) {
			this.id = e.id
			this.form.order_id = e.id
			
			this.info = uni.getStorageSync('refundOrder')
			this.form.course_id = this.info.ProductID
		},
		methods: {
		getOrderStatus(status) {
			// 0-待支付，1-待发货，2-已发货(不用)，3-运输中，4-已完成，5-退款申请中，6-退款拒绝，7-退款成功，8-介入中，9同意退货（输入运单号,10等待商家退款
			let OrderStatus = [{
					label: '待支付',
					value: 0
				},
				{
					label: '待发货',
					value: 1
				},
				{
					label: '已发货',
					value: 2
				},
				{
					label: '运输中',
					value: 3
				},
				{
					label: '已完成',
					value: 4
				},
				{
					label: '退款申请中',
					value: 5
				},
				{
					label: '退款拒绝',
					value: 6
				},
				{
					label: '退款成功',
					value: 7
				},
				{
					label: '介入中',
					value: 8
				},
				{
					label: '同意退货',
					value: 9
				},
				{
					label: '等待退款',
					value: 10
				}
			]
			let name = ''
			try {
				name = OrderStatus.find(i => i.value === status).label
			} catch (e) {
		
			}
			return name
		},
			consultHim() {
				if (this.info.order.type == 0) {
					uni.showLoading()
					InformationSendFriendRequest({
						id: this.info.order.business_card_id
					}).then(res => {
						uni.hideLoading()
						uni.showToast({duration:3000,
							title: '已递名片！',
							icon: 'none'
						})
					
					})
				}
				if (this.info.order.type == 1) {
					uni.navigateTo({
						url: '/pagesA/wxChat/wxChat?id=' + this.info.order.user_id
					})
				}
			},
			submit(){
				// if(this.form.content === ''){
				// 	uni.showToast({duration:3000,
				// 		title:"请输入评价内容！",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				let data = {
					...this.form,
					video_quality: this.form.video_quality * 2,
					content_quality: this.form.content_quality * 2,
					teaching_method: this.form.teaching_method * 2
				}
				uni.showLoading()
				InformationAddEvaluate(data).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title:'评价成功！',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-info {
		padding: 30rpx 56rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 16rpx;
		border-bottom: 7rpx solid #F6F7F8;
	}

	.order-number {
		font-family: PingFang;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 36rpx;
	}

	.course-name {
		font-family: PingFang;
		font-weight: bold;
		font-size: 28rpx;
		color: #131313;
		margin-bottom: 21rpx;
	}

	.course-expiry {
		font-family: PingFang;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 27rpx;
	}

	.paid-amount {
		font-family: PingFang;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 46rpx;
	}

	.instructor-info {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.instructor-info-l {
			display: flex;
			align-items: center;
			font-family: PingFang;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;

			image {
				width: 88rpx;
				height: 88rpx;
			}
		}
	}

	.instructor-photo {
		border-radius: 50%;
		margin-right: 27rpx;
		margin-left: 30rpx;
	}


	.consult-button {
		width: 146rpx;
		height: 62rpx;
		border-radius: 30rpx;
		border: 1px solid #FFC000;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFC000;
	}

	.rating-section {
		padding: 30rpx;
		background-color: #fff;
	}

	.rating-title {
		font-family: PingFang;
		font-weight: 800;
		font-size: 30rpx;
		color: #131313;
		margin-bottom: 22rpx;
	}

	.rating-item {
		display: flex;
		align-items: center;
		margin-bottom: 33rpx;
		justify-content: center;
	}

	.rating-label {
		font-family: PingFang;
		font-weight: 500;
		font-size: 28rpx;
		color: #131313;
		margin-right: 55rpx;
	}

	.stars {
		width: 225rpx;
		display: flex;
		align-items: center;
		margin-right: 34rpx;
	}

	.star {
		width: 29rpx;
		height: 26rpx;
		margin-right: 20rpx;
	}

	.score {
		font-size: 28rpx;
		color: #ff5722;
		width: 80rpx;
	}

	.comment-section {
		padding: 24rpx 34rpx;
		background-color: #fff;
		margin-top: 54rpx;
		box-sizing: border-box;
		width: 694rpx;
		height: 269rpx;
		background: #F6F7F8;
	}

	.comment-input {
		width: 100%;
		height: 100%;
		font-family: PingFang;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.submit-button {
		width: 660rpx;
		height: 86rpx;
		background: #12B475;
		border-radius: 43rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.product-list {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 20rpx;
		.product-list-item {
			width: 100%;
			display: flex;
			height: 280rpx;
			border-radius: 20rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 5rpx #777; 
			margin-bottom: 20rpx;
			.product-list-item-img {
				width: 280rpx;
				height: 280rpx;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				margin-right: 20rpx; 
			}
			.product-list-item-r {
				min-width: 0;
				flex: 1;
				box-sizing: border-box;
				padding: 20rpx;
				.product-list-item-r-title {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.product-list-item-r-guige {
					width: fit-content;
					background: #F8F8F8;
					padding: 1rpx 18rpx;
					border-radius: 5rpx;
					font-size: 28rpx;
					color: #A1A0A3;
					margin-bottom: 20rpx; 
				}
				.product-list-item-r-price {
					font-size: 36rpx;
					color: #E7373A;
					margin-bottom: 20rpx;
				}
				.product-list-item-r-num {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}
				.product-list-item-r-btn {
					display: flex;
					align-items: center;
					justify-content: space-around;
				}
				
			}
		}
	}
</style>